<template>
  <div style="margin: 0px -20px 0px -20px" class="Afont">
    <el-menu
      :default-active="activeIndex2"
      mode="horizontal"
      @select="handleSelect"
      text-color="#303133"
      active-text-color="#303133"
    >
      <el-menu-item index="1">
        <el-image
          src="/src/assets/logo.png"
          style="height: 100%; margin: 1px 30px 0px 30px"
          @click="JumpMain"
        ></el-image
      ></el-menu-item>
      <el-row>
        <el-menu-item index="2" class="tag"
          ><a @click="JumpMain" class="tagfont">首页</a></el-menu-item
        >
        <el-menu-item index="3" class="tag"
          ><a @click="navigateToType" class="tagfont">多人运动</a></el-menu-item
        >
 
        <el-input
          v-model="searchQuery"
          :disabled="disabled"
          :placeholder="placeholder"
          prefix-icon="el-icon-search"
          class="searchBox"
          clearable
          @clear="search"
          @keydown.enter.native="search"
          placeholder="请输入内容"
        ></el-input>
        <el-button
          :disabled="disabled"
          icon="el-icon-search"
          type="primary"
          class="searchbutton"
          @click="search"
        >
          <a class="Afont" style="margin: 0px 0px 0px -16px">搜索</a>
        </el-button>
 
        <el-menu-item index="5" style="margin: 0px 20px 0px 100px">
          <template v-if="status">
            <a class="tagfont" @click="jumpUserCenter">{{ userInfo.username }}</a>
            <pre> / </pre>
            <a @click="logout" class="tagfont">退出</a>
          </template>
          <template v-else>
            <a @click="jumpLoginPage">登录/注册</a>
          </template></el-menu-item
        >
      </el-row>
    </el-menu>
  </div>
</template>
 
<script setup>
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import axios from "axios";
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { provide } from 'vue';
import { defineEmits } from 'vue';
 
const router = useRouter();
const userInfo = ref({});
const status = ref(false);
const searchQuery = ref("");
const userID = ref(null); 

function navigateToType(type) {
  router.push({ name: "Type", query: { yard_type: type } });
}
function jumpLoginPage() {
  router.push({ name: "Login" });
}
 
function JumpMain() {
  router.push({ name: "home" });
}
 


function search() {
  if (searchQuery.value.trim() !== "") {
    router.push({ name: "Search", query: { query: searchQuery.value } });
  } else {
    ElMessage({
      message: "请输入搜索内容",
      type: "warning",
    });
  }
}
 
function jumpUserCenter() {
  router.push({ name: "center" });
}

const emit = defineEmits(['userID']);
console.log(emit);

onMounted(function () {
  checkUser();
});
 

async function checkUser() {
  const res = await axios.get("http://localhost:8000/Login/check", {
    withCredentials: true,
  });
  const data = res.data;
  if (data.code == 0) {
    if (data.data.status == 1) {
      status.value = true;
      userInfo.value = data.data.userInfo;
      userID.value = userInfo.value.userID;
      emit('updateUserID', userID.value);

    }
  } else {
    ElMessage({
      message: data.msg,
      type: "error",
    });
  }
}


async function logout() {
  try {
    const res = await axios.post(
      "http://localhost:8000/logout",
      {},
      { withCredentials: true }
    );
    const data = res.data;
    if (data.code === 0) {
      ElMessage({
        message: data.msg,
        type: "success",
      });
      status.value = false;
      userInfo.value = {};
      router.push("/"); // 确保登出后立即重定向
    } else {
      ElMessage({
        message: data.msg,
        type: "error",
      });
    }
  } catch (error) {
    console.error("Logout failed:", error);
    ElMessage({
      message: "退出登录失败",
      type: "error",
    });
  }
}


</script>
 
<style>
.dhy1 {
  text-align: center;
}
.Afont {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-weight: 550;
}
.tag {
  margin: 0px 15px 0px 15px;
}
.tagfont {
  font-size: 20px;
}
.searchBox {
  margin: 12px 10px 0px 50px;
  width: 600px;
  height: 38px;
}
.searchbutton {
  margin: 10px 10px 0px 0px;
  height: 40px;
}
</style>